<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div v-html="message"></div>

			{{5+5}}<br/> {{ ok ? 'YES' : 'NO' }}
			<br/> {{ message2.split('').reverse().join('') }}
			<p> 属性中的值应使用 v-bind 指令。</p>
			<div v-bind:id="'list-' + id">菜鸟教程</div>
			
			<p> v- 前缀的特殊属性。
			指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：</p>
			
			<p v-if="seen">现在你看到我了</p>
		    <template v-if="ok">
		      <h1>菜鸟教程</h1>
		      <p>学的不仅是技术，更是梦想！</p>
		      <p>哈哈哈，打字辛苦啊！！！</p>
		    </template>
		    
		    <p>参数
			参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：</p>
			<pre><a v-bind:href="url" v-bind:target="target">菜鸟教程</a></pre>
			
			<p>另一个例子是 v-on 指令，它用于监听 DOM 事件：</p>
			<a v-on:click="doSomething">doSomething</a>
			
			<p>在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：</p>
			<p>{{ message3 }}</p>
   			<input v-model="message3">
   			
   			<p>按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。</p>
   			<p>{{ message4 }}</p>
    		<button v-on:click="reverseMessage">反转字符串</button>
    		
    		<p>过滤器
			Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：</p>
			{{ message5 | capitalize }}
			
			<p>Vue.js 为两个最为常用的指令提供了特别的缩写：</p>

		</div>
		<xmp>
			<!-- 完整语法 -->
			<a v-bind:href="url"></a>
			<!-- 缩写 -->
			<a :href="url"></a> 
			<!-- 完整语法 -->
			<a v-on:click="doSomething"></a>
			<!-- 缩写 -->
			<a @click="doSomething"></a>
		</xmp>
	</body>

	<script>
		// 使用 v-html 指令用于输出 html 代码：
		new Vue({
			el: '#app',
			data: {
				message: '<h1>菜鸟教程</h1>',
				ok: true,
				message2: 'RUNOOB',
				id: 11,
				seen: true,
				ok: true,
				url: 'https://www.runoob.com',
				target:'_blank',
				message3: 'Runoob!',
				message4: 'Runoob!',
				message5: 'this gonna change!'
			},
			methods: {
				doSomething: function() {
					alert("doSomething !!!");
				},
				reverseMessage: function() {
					this.message4 = this.message4.split('').reverse().join('')
				}
			},
			filters: {
				capitalize: function(value) {
					if(!value) return ''
					value = value.toString()
					return value.charAt(0).toUpperCase() + value.slice(1)
				}
			}
		});
	</script>

</html>